<template>
  <div class="test">
    <el-row type="flex" justify="center">
      <el-col :span="1">
        <div class="grid-content"></div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="18.5" class="card1">
        <h1 class="hh1">第{{ qid }}题</h1>

        <el-card class="box-card" shadow="never" :body-style="{ padding: '0px' }" style="height: 60vh">
          <div style="display: flex; justify-content: space-around; margin-bottom: 20px">
            <img
              width="250"
              src="https://img2.baidu.com/it/u=564651607,3696553108&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500"
              class="image"
            />
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fphoto%2Fl%2Fpublic%2Fp2233025603.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657201465&t=e1710eb2b3942c716725439ed67ba7bb"
              width="250"
              class="image"
            />
            <img
              src="https://img2.baidu.com/it/u=1476848426,815521043&fm=253&fmt=auto&app=138&f=JPEG?w=567&h=355"
              width="250"
              class="image"
            />
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp487061761.jpg&refer=http%3A%2F%2Fimg2.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657201465&t=7315921bfcf4abedc0309ba6fdf0e681"
              width="250"
              class="image"
            />
          </div>
          <div style="text-align:center">{{ question }}</div>
          <br />
          <br />
          <div class="answer-btn">
          <el-button  shadow="hover" plain @click="open11(), add() ">A:{{ aa }}</el-button>

          <el-button  shadow="hover" plain @click="open22(), add()">B:{{ bb }}</el-button>
          </div>
          <br />
          <br />
          <el-row type="flex" justify="center">
            <!---->
            <el-button type="danger" plain @click="minus()">上一题</el-button>
            <el-button type="danger" plain @click="add()">下一题</el-button>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { h } from 'vue'
import { ref } from 'vue'
import { ChatDotRound, ChatLineRound, ChatRound } from '@element-plus/icons-vue'
export default {
  name: 'Test',
  data() {
    return {
      qid: '',
      question: '',
      aa: '',
      bb: '',
      code: 1,
      myarray1: '',
    }
  },
  methods: {
    add() {
      if (this.code <= 92) {
        this.code += 1
        console.log(this.code)
        this.gettest()
      } else {
        const that = this
        if (this.code == 93) {
          that.$axios.get('/getlog', { params: { ss: this.myarray1 } })
        }
        this.$router.push({ path: '/testover', name: 'Testover' })
      }
    },
    minus() {
      if (this.code >= 2) {
        this.code = this.code - 1
        console.log(this.code)
        this.gettest()
      } else {
        this.$message({
          type: 'warging',
          message: '前面没有题目了！',
        })
      }
    },
    gettest() {
      const that = this
      this.$axios
        .get('/gettest', { params: { code: this.code } })
        .then(function (response) {
          // 处理成功情况
          that.qid = response['data']['qid']
          that.question = response['data']['question']
          that.aa = response['data']['aa']
          that.bb = response['data']['bb']
        })
        .catch(function (error) {
          // 处理错误情况
          console.log(error)
        })
    },
    open11() {
      this.myarray1 = this.myarray1.concat('0')
      console.log(this.myarray1)
    },
    open22() {
      this.myarray1 = this.myarray1.concat('1')
      console.log(this.myarray1)
    },
    
    open1() {
      this.$notify({
        title: '您已选择了A',
        message: h('i', { style: 'color: coral' }, '选项只有一次机会'),
        position: 'top-left',
        duration: 1500,
      })
    },
    open2() {
      this.$notify({
        title: '您已选择了B',
        message: h('i', { style: 'color: coral' }, '选项只有一次机会'),
        position: 'top-left',
        duration: 1500,
      })
    },

  },
  created() {
    this.myarray1 = ''
    this.code = 1
    this.gettest()
  },
  setup() {
    const activeNames = ref([''])
    const value = ref()
    const icons = [ChatRound, ChatLineRound, ChatDotRound]

    return { activeNames, value, icons }
  },
}
</script>

<style>
.hh1 {
  text-align: center;
  color: #404f3f;
}
.el-row {
  margin-bottom: 30px;
}
.grid-content {
  /* background: rgb(14, 214, 131); */
  border-radius: 4px;
  min-height: 5px;
  min-width: 100px;

  text-align: center;
}
.card1 {
  height: 80vh;
  width: 1100px;
  border-radius: 30px;
  /* box-shadow: 0 2px 12px 0 rgb(243, 102, 102); */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); */
}

.box-card {
  left: 50%;
}

.answer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
